apps/web/lib/features/task/task-displays.tsx (1)

67-98: Consider creating a dedicated time-display module

The new time display components (DisplayTimeForTimesheet and TotalTimeDisplay) seem to be more focused on time visualization rather than task-specific display logic. Consider moving them to a dedicated time-display module (e.g., time-displays.tsx) to:

1. Better separate concerns
2. Make these components reusable across different contexts
3. Keep task-displays.tsx focused on task-specific display logic

apps/web/lib/features/integrations/calendar/table-time-sheet.tsx (1)

334-336: Verify duration prop type and add error handling

While the dedicated component improves code organization, consider:

1. Adding prop type validation for duration
2. Handling cases where duration is undefined or invalid

 <DisplayTimeForTimesheet
-  duration={task.timesheet.duration}
+  duration={task.timesheet.duration ?? 0}
 />

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Description: Verify translation key and component implementation
# Check for translation key
rg -g '*.json' '"TOTAL_HOURS"'

# Check TotalTimeDisplay implementation for edge cases
ast-grep --pattern 'export function TotalTimeDisplay({ $_ }) {
  $$$
}'

#!/bin/bash
# Search for TotalTimeDisplay component implementation
rg -g '*.{tsx,ts,jsx,js}' -B 2 -A 10 'TotalTimeDisplay.*=.*{' 

#!/bin/bash
# Search for TotalTimeDisplay component implementation
rg -g '*.{tsx,ts,jsx,js}' -B 2 -A 10 'function TotalTimeDisplay'

# Alternative search in case it's defined as an arrow function
rg -g '*.{tsx,ts,jsx,js}' -B 2 -A 10 'const TotalTimeDisplay'

apps/web/lib/features/task/task-displays.tsx (3)

1-6: Maintain consistent quote style in imports

The ClockIcon import uses double quotes while other imports use single quotes.

-import { ClockIcon } from "@radix-ui/react-icons"
+import { ClockIcon } from '@radix-ui/react-icons';

---

68-74: Add TypeScript return type for better type safety

The formatTime helper function would benefit from explicit return type annotation.

-const formatTime = (hours: number, minutes: number) => (
+const formatTime = (hours: number, minutes: number): JSX.Element => (

---

83-85: Maintain consistent quote style in className attributes

Use double quotes for consistency with other components in the file.

-<div className='flex items-center font-medium gap-x-1'>
-	<ClockIcon className='text-green-400 text-[14px] h-4 w-4' />
-	<div className='flex items-center'>
+<div className="flex items-center font-medium gap-x-1">
+	<ClockIcon className="text-green-400 text-[14px] h-4 w-4" />
+	<div className="flex items-center">

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Description: Verify the usage of DisplayTimeForTimesheet and TotalTimeDisplay components

# Search for component imports and usage
echo "Checking component imports and usage..."
rg -l "DisplayTimeForTimesheet|TotalTimeDisplay" --type tsx

# Search specifically in DataTableTimeSheet component
echo "Checking DataTableTimeSheet implementation..."
rg -A 5 "DataTableTimeSheet" --type tsx

#!/bin/bash
# Description: Verify the usage of DisplayTimeForTimesheet and TotalTimeDisplay components

# Search for component imports and usage without file type restriction
echo "Checking component imports and usage..."
rg -l "DisplayTimeForTimesheet|TotalTimeDisplay"

# Search specifically in DataTableTimeSheet component
echo "Checking DataTableTimeSheet implementation..."
rg -A 10 "DataTableTimeSheet"

# Search for files that might contain these components
echo "Searching for potential component files..."
fd -e tsx -e ts -e jsx -e js

#!/bin/bash
# Search for the usage of DisplayTimeForTimesheet and TotalTimeDisplay components in table-time-sheet.tsx
echo "Checking component usage in table-time-sheet.tsx..."
rg -A 5 "DisplayTimeForTimesheet|TotalTimeDisplay" "apps/web/lib/features/integrations/calendar/table-time-sheet.tsx"

# Search for any other potential usages of these components
echo "Checking other potential usages..."
rg -A 5 "DisplayTimeForTimesheet|TotalTimeDisplay" "apps/web/lib/features/task/task-displays.tsx"

apps/web/lib/features/task/task-displays.tsx (4)

1-6: Maintain consistent quote style in imports

The ClockIcon import uses double quotes while other imports use single quotes.

-import { ClockIcon } from "@radix-ui/react-icons"
+import { ClockIcon } from '@radix-ui/react-icons';

---

83-85: Maintain consistent quote style in className attributes

Use double quotes for consistency with other components in the file.

-		<div className='flex items-center font-medium gap-x-1'>
-			<ClockIcon className='text-green-400 text-[14px] h-4 w-4' />
-			<div className='flex items-center'>
+		<div className="flex items-center font-medium gap-x-1">
+			<ClockIcon className="text-green-400 text-[14px] h-4 w-4" />
+			<div className="flex items-center">

---

106-120: Consider improving error handling and date comparisons

A few suggestions to enhance robustness and performance:

1. Add error handling for invalid dates
2. Consider timezone implications in date comparisons
3. Move calculations outside JSX for better performance

 export const TotalDurationByDate = React.memo(
 	({ timesheetLog, createdAt }: { timesheetLog: TimesheetLog[]; createdAt: Date | string }) => {
-		const targetDateISO = new Date(createdAt).toISOString();
+		// Handle invalid dates
+		const targetDate = new Date(createdAt);
+		if (isNaN(targetDate.getTime())) {
+			console.warn('Invalid date provided to TotalDurationByDate');
+			return null;
+		}
+
+		// Move calculations outside JSX
+		const targetDateISO = targetDate.toISOString();
+		
+		// Use UTC date comparison to avoid timezone issues
 		const filteredLogs = timesheetLog.filter(
-			(item) => formatDate(item.timesheet.createdAt) === formatDate(targetDateISO));
+			(item) => {
+				const itemDate = new Date(item.timesheet.createdAt);
+				return itemDate.toDateString() === targetDate.toDateString();
+			});
+
 		const totalDurationInSeconds = filteredLogs.reduce(
 			(total, log) => total + (log.timesheet?.duration || 0), 0);
 		const { h: hours, m: minutes } = secondsToTime(totalDurationInSeconds);
+
 		return (
 			<div className="flex items-center text-[#868688]">
 				{formatTime(hours, minutes)}

---

Line range hint 1-121: Consider extracting shared types and constants

To improve maintainability and reusability, consider:

1. Creating a shared types file for timesheet-related interfaces
2. Extracting time-related constants and utilities into a dedicated module
3. Creating a shared styles object for common className combinations

This would help maintain consistency across the codebase and make future updates easier.

Configuration used: CodeRabbit UI
Review profile: CHILL

apps/web/lib/features/task/task-displays.tsx (4)

6-6: Maintain consistent quote style

The ClockIcon import uses double quotes while other imports use single quotes. Maintain consistency by using single quotes.

-import { ClockIcon } from "@radix-ui/react-icons"
+import { ClockIcon } from '@radix-ui/react-icons'

---

76-91: Clean up className styling

The component implementation looks good, but there are some style inconsistencies:

1. Inconsistent quote style in className attributes
2. Redundant text-[14px] alongside h-4 w-4

-		<div className='flex items-center font-medium gap-x-1'>
-			<ClockIcon className='text-green-400 text-[14px] h-4 w-4' />
-			<div className='flex items-center'>
+		<div className="flex items-center font-medium gap-x-1">
+			<ClockIcon className="text-green-400 h-4 w-4" />
+			<div className="flex items-center">

---

106-121: Consider optimizing date handling and performance

While the implementation is functional, consider these improvements:

1. Date comparison might be affected by timezone differences. Consider using start/end of day comparisons.
2. For large datasets, consider memoizing the filtered results.

export const TotalDurationByDate = React.memo(
	({ timesheetLog, createdAt }: { timesheetLog: TimesheetLog[]; createdAt: Date | string }) => {
-		const targetDateISO = new Date(createdAt).toISOString();
+		const targetDate = new Date(createdAt);
+		const startOfDay = new Date(targetDate.setHours(0, 0, 0, 0));
+		const endOfDay = new Date(targetDate.setHours(23, 59, 59, 999));
+
+		// Memoize filtered logs
+		const filteredLogs = React.useMemo(() => 
			timesheetLog.filter((item) => {
-				formatDate(item.timesheet.createdAt) === formatDate(targetDateISO)
+				const logDate = new Date(item.timesheet.createdAt);
+				return logDate >= startOfDay && logDate <= endOfDay;
			}),
+			[timesheetLog, startOfDay, endOfDay]
+		);

---

Line range hint 1-121: Good architectural decisions and component structure

The file demonstrates good architectural decisions:

1. Clear separation of concerns between display components
2. Proper use of memoization for performance
3. Good extraction of common functionality
4. Consistent error handling

Consider creating a separate utilities file for time-related functions if more time manipulation logic is added in the future.

Configuration used: CodeRabbit UI
Review profile: CHILL